<template>
  <div class="second-comp">
    <el-card shadow="hover">
      <template #header>
        <el-menu mode="horizontal" :default-active="activeIndex"  @select="handleSelect">
          <el-menu-item index="sale">销售额</el-menu-item>
          <el-menu-item index="visit">访问量</el-menu-item>
        </el-menu>
        <!-- 2.按钮 -->
        <div class="right">
          <el-radio-group v-model="radio">
            <el-radio-button label="今日" value="today"></el-radio-button>
            <el-radio-button label="本周" value="week"></el-radio-button>
            <el-radio-button label="本月" value="month"></el-radio-button>
            <el-radio-button label="今年" value="year"></el-radio-button>
          </el-radio-group>
          <!-- 3.日期选择 -->
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            :shortcuts="shortcuts"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
      </template>
      <template #default>
        <div class="container">
            <div class="left-chart">
                <v-chart :option="option"></v-chart>
            </div>
            <div class="right-list">
                <div class="title">排行榜</div>
                <div class="list-item" v-for="item in rankLists" :key="item.no">
                    <span :class="{
                        highlight:item.no<=3,
                    }">{{ item.no }}</span>
                    <span>{{ item.title }}</span>
                    <span>{{ item.sales }}</span>
                </div>

            </div>
      </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { getSalesData } from '@/api'
const activeIndex = ref('sale')
const radio = ref('today')
const dateRange = ref('')
const option = ref({})
const salesData = ref('')
const rankLists = ref('')

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
const renderChart = (v1,v2) => {
  option.value = {
    title: {
      text: '年度销售额',
      left: 'left',
      textStyle: {
        fontSize: 14,
      },
    },
    grid: {
      left: 40,
    },
    xAxis: {
      type: 'category',
      data: v2,
      // x轴的刻度对齐label标签
      axisTick: {
        show: true,
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: 'value',
      // y轴的刻度线设置为虚线
      splitLine: {
        lineStyle: {
          type: 'dotted',
        },
      },
    },
    series: {
      type: 'bar',
      data: v1,
      barWidth: '40%',
      // item的颜色
      itemStyle: {
        color: 'skyblue',
      },
    },
  }
}
const handleSelect = (index) => {
      const {
            saleFulleYear,
            saleFulleYearAxis,
            saleRank,
            visitFullYear,
            visitFullYeadAxis,
            visitRank,
      } = salesData.value
  if (index === 'sale') {
    renderChart(saleFulleYear, saleFulleYearAxis)
    rankLists.value = saleRank
  }else{
    renderChart(visitFullYear, visitFullYeadAxis)
    rankLists.value = visitRank
  }
}
onMounted(async () => {
  salesData.value = await getSalesData()
  const { saleFulleYear, saleFulleYearAxis, saleRank } = salesData.value

  // 渲染图表
  renderChart(saleFulleYear, saleFulleYearAxis)

  // 渲染列表
  rankLists.value = saleRank
})
</script>

<style lang="scss" scoped>
.second-comp {
  position: relative;
  margin-top: 20px;
  :deep(.el-card__header) {
    padding: 0;
    border: none;
    .el-menu {
      padding-left: 50px;
    }
    .right {
      position: absolute;
      top: 14px;
      right: 2px;
      //两个element-plus的组件之间有间隙，是文本造成的,设置font-size为0,高度就为0,是常用的方法
       font-size: 0;
      .el-radio-group {
        margin-right: 10px;
      }
    }
  }
  .container{
    display: flex;
    .left-chart{
        flex:0 0 70%;
        height: 434px;
    }
    .right-list{
        flex: 1;
        .title{
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 600;
        }
        .list-item{
            margin: 20px 0;
             display: flex;
             align-items: center;
            gap: 20px;
            span{
                font-size: 14px;
                color: #464545;
                &:nth-child(1){
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    text-align: center;
                    line-height: 20px;
                }
                &:nth-child(2){
                    flex: 1;
                }
                &.highlight{
                    background-color: #09b3f7;
                    color: #fff;
                }
            }
        }
    }
  }
}
</style>
